<template>
  <div class="navtob">
    <div class="daleft">
      <ul class="left">
        <li class="logo">
          <div class="img">
            <img src="../assets/logo (2).png" alt="" />
          </div>
          <span> 网易云音乐 </span>
        </li>
      </ul>
      <div>
        <ul class="gong">
          <li class="sjianA" @click="shangyb">
            <div class="img">
              <img src="../assets/fh.png" alt="" />
            </div>
          </li>
          <li class="sjianb">
            <div class="img">
              <img src="../assets/fh.png" alt="" />
            </div>
          </li>
          <li>
            <div class="ssk" border="0" style="cursor: pointer">
              <div class="shousimg" @click="search">
                <div class="img">
                  <img src="../assets/ssss.png" alt="" />
                </div>
              </div>

              <el-input
                autocomplete="off"
                @focus="huod"
                placeholder="请输入内容"
                v-model="input2"
                @keyup.enter.native="search"
                auto-complete="off"
                @blur="sq"
              >
              </el-input>
            </div>
            <!-- 推荐内容 -->
          </li>
          <li>
            <div class="maikf">
              <img src="../assets/k.png" alt="" />
            </div>
          </li>
        </ul>
        <el-collapse-transition>
          <div class="tianiss" v-show="show3">
            <ul>
              <li>
                <div class="history" v-if="Shistory.length != 0">
                  <div class="tiltesS">
                    <span>收索记录</span>
                    <div
                      class="img"
                      @click="shancjil"
                      border="0"
                      style="cursor: pointer"
                    >
                      <img
                        src="../assets/lajt.png"
                        alt=""
                        border="0"
                        style="cursor: pointer"
                      />
                    </div>
                  </div>
                  <div class="shosuoJilu">
                    <span
                      v-for="(item, index) in Shistory"
                      :key="index"
                      class="titles"
                      border="0"
                      style="cursor: pointer"
                      @mouseover="jrtj(index)"
                      @mouseleave="jrtjtc(index)"
                      @click="xuanzho(index)"
                      >{{ item }}
                      <span
                        class="shanc"
                        v-show="shos[index]"
                        @click.stop="shancu(index)"
                        >+</span
                      ></span
                    >
                  </div>
                </div>
              </li>

              <li><div class="jiage">热搜榜</div></li>
              <li
                v-for="(item, index) in HOtDetal"
                :key="index"
                border="0"
                style="cursor: pointer"
                @click="tochaxun(index)"
              >
                <div class="jiage">
                  <span class="texsa">{{ index + 1 }}</span>
                  <div class="tltlesa">
                    <div class="biaotIEX">
                      <span>
                        {{ item.searchWord }}
                      </span>
                      <span>
                        {{ item.score }}
                      </span>

                      <div class="img" v-show="item.iconUrl">
                        <el-image
                          style="width: 100%; height: 100%"
                          :src="item.iconUrl"
                          fit="contain"
                        ></el-image>
                        <!-- <img :src="item.iconUrl" alt="" /> -->
                      </div>
                    </div>
                    <span class="conten" v-if="item.content">{{
                      item.content
                    }}</span>
                  </div>
                </div>
              </li>
            </ul>

            <div class="guanbi" @click="guanbi">
              <img src="../assets/gb.png" alt="" />
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <div class="daright">
      <ul class="right">
        <li class="zhuti">
          <img src="../assets/sz.png" alt="" />
        </li>
        <li class="zhuti">
          <img src="../assets/zt.png" alt="" />
        </li>
        <el-collapse-transition>
          <li
            class="yhun"
            @click="nologo"
            v-if="!this.$store.state.denglo"
            border="0"
            style="cursor: pointer"
          >
            <div class="txiang">
              <img src="../assets/wdl.png" alt="" />
            </div>
            <span>未登录</span>
          </li>
          <li
            class="yhun"
            @click="tcdengl"
            v-else
            border="0"
            style="cursor: pointer"
          >
            <div v-if="datas.profile" class="yhun">
              <div class="denglo">
                <img :src="datas.profile.avatarUrl" alt="" />
              </div>
              <span>{{ datas.profile.nickname }}</span>
            </div>
            <!-- 头像什么的 -->
          </li>
        </el-collapse-transition>
      </ul>
      <el-collapse-transition>
        <div class="tiani" v-if="wad">
          <ul>
            <li>
              <div
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  height: 100%;
                  cursor: pointer;
                "
              >
                <div class="zhuantai" v-if="datas.profile">
                  <div class="iszhuangts">
                    <span>
                      {{ datas.profile.eventCount }}
                    </span>
                    <span> 动态 </span>
                  </div>
                  <div class="iszhuangts">
                    <span>
                      {{ datas.profile.follows }}
                    </span>
                    <span> 关注 </span>
                  </div>
                  <div class="iszhuangts">
                    <span>
                      {{ datas.profile.followeds }}
                    </span>
                    <span> 粉丝 </span>
                  </div>
                </div>
              </div>
            </li>
            <li @click="tc">
              <div
                style="margin-left: 20px; margin-right: 20px; cursor: pointer"
              >
                <span>退出登录</span>
              </div>
            </li>
          </ul>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
import API from "../http/API";
export default {
  props: ["ismon"],
  watch: {
    ismon(val) {
      // console.log("123465");
      // console.log(val);
      this.datas = val;
    },
  },
  data() {
    return {
      input2: "毛不易",
      datas: [],

      show3: false,
      fullscreenLoading: false,
      wad: false,
      index: 0,
      //收索缓存删除健的显示隐藏
      shos: [],
      //默认搜索关键词
      searchDefault: [],
      //随机数生成
      indexst: 0,
      //历史记录
      Shistory: [],
      //热搜索榜单
      HOtDetal: [],
    };
  },

  created() {
    // console.log(localStorage.getItem("likeli"));

    if (localStorage.getItem("Shistorys") != null) {
      this.Shistory = JSON.parse(localStorage.getItem("Shistorys"));
      for (let index = 0; index < this.Shistory.length; index++) {
        this.shos.push(false);
      }
    }

    if (this.$store.state.denglo == true) {
      this.datas = JSON.parse(localStorage.getItem("User"));
    }

    if (localStorage.getItem("likelistDataid") != null) {
      this.likeSouShuo();
    } else {
      // let shuji = parseInt(Math.floor(Math.random() * 1));
      let shuji = 0;
      if (shuji == 0) {
        this.horts();
      }
    }
    // this.horts();
    this.hotTjian();
  },
  mounted() {
    // console.log(this.ismon);
  },
  methods: {
    // 上一步
    shangyb() {
      this.$router.go(-1);
    },

    //关闭页面
    guanbi() {
      this.show3 = false;
    },
    //点击热门查询的时候
    tochaxun(e) {
      this.input2 = this.HOtDetal[e].searchWord;

      // console.log("点了搜索了");
      this.search();
    },
    //搜索热门推荐
    hotTjian() {
      this.$get(API.SEARCH_HOT_DETAIL).then((e) => {
        if (e.code == 200) {
          this.HOtDetal = e.data;
        }
        // console.log(this.HOtDetal);
      });
    },
    //把喜欢的歌手当中默认搜索框
    likeSouShuo() {
      let likeID = JSON.parse(localStorage.getItem("likelistDataid"));
      // console.log(likeID);
      likeID = likeID.toString();
      this.$post(API.SONG_DETAIL, {
        ids: likeID,
      }).then((e) => {
        // console.log(e);
        this.searchDefault = e.songs;
        this.indexst = parseInt(Math.floor(Math.random() * e.songs.length));
        this.searchDefault[this.indexst].ar;
        if (this.searchDefault[this.indexst].ar.length > 1) {
          this.input2 = this.searchDefault[this.indexst].name;
        } else {
          this.input2 = this.searchDefault[this.indexst].ar[0].name;
        }
        // this.guoliq(this.input2)
      });
    },

    //如果没有登录就拿热门歌曲或者拿热门歌手来进行搜索判断
    horts() {
      this.$post(API.TOP_ARTISTS).then((e) => {
        this.searchDefault = e.artists;
        this.indexst = parseInt(Math.floor(Math.random() * e.artists.length));
        this.searchDefault[this.indexst].name;
      });
    },
    //删除全部搜索记录
    shancjil() {
      localStorage.removeItem("Shistorys");
      this.Shistory = [];
    },

    // 进行历史记录管理
    lisjl() {
      for (let index = 0; index < this.Shistory.length; index++) {
        if (this.Shistory[index] == this.input2) {
          if (index != 0) {
            this.Shistory.splice(index, index);
            this.Shistory.unshift(this.input2);
            return;
          } else {
            return (this.input2 = this.Shistory[index]);
          }
        }
      }

      if (this.Shistory.length == 6) {
        this.Shistory.pop();
        this.Shistory.unshift(this.input2);
        localStorage.setItem("Shistorys", JSON.stringify(this.Shistory));
        return;
      }
      this.Shistory.unshift(this.input2);
      localStorage.setItem("Shistorys", JSON.stringify(this.Shistory));
    },
    //搜索
    search() {
      //  console.log("搜索")
      if (this.input2 != "") {
        // console.log("搜索");
        if (localStorage.getItem("Shistorys") == null) {
          this.Shistory.unshift(this.input2);
          localStorage.setItem("Shistorys", JSON.stringify(this.Shistory));
        } else {
          this.lisjl();
          // console.log("sous");
        }

        this.$router
          .push({
            path: "/search",
            query: {
              neme: this.input2,
            },
          })
          .catch((err) => {});
      }
      this.sq();
    },
    //选中历史收索框
    xuanzho(index) {
      if (index != 0) {
        this.input2 = this.Shistory[index];
        this.Shistory.splice(index, index);
        this.Shistory.unshift(this.input2);
      } else {
        this.input2 = this.Shistory[index];
      }
      this.search();
    },
    // 删除历史记录
    shancu(index) {
      this.show3 = true;
      this.Shistory.splice(index, index);
      // console.log(this.Shistory);

      if (index == 0) {
        this.Shistory.splice(0, 1);
      }
      localStorage.setItem("Shistorys", JSON.stringify(this.Shistory));
    },

    jrtj(e) {
      // console.log(e);
      this.$nextTick(() => {
        this.shos[e] = true;
        this.$forceUpdate();
      });

      // this.shos = true;
    },
    jrtjtc(e) {
      this.$nextTick(() => {
        this.shos[e] = false;
        this.$forceUpdate();
      });

      // this.shos = false;
    },
    huod() {
      setTimeout(() => {
        this.show3 = true;
      }, 300);
    },
    sq() {
      setTimeout(() => {
        this.show3 = false;
      }, 300);
    },
    nologo() {
      //未登录点击的时候唤起登录界面
      this.$emit("getTreeData", 0);
    },
    tcdengl() {
      this.index++;
      if (this.index % 2 == 0) {
        this.wad = false;
      } else {
        this.wad = true;
      }
    },
    tc() {
      this.$get(API.LOGOUT)
        .then((result) => {
          this.wad = false;

          localStorage.removeItem("token");
          localStorage.removeItem("cookie");
          localStorage.removeItem("User");
          this.datas = [];
          //2表示退出登录
          this.$emit("getTreeData", 2);
          this.$store.commit("dengl");
        })
        .catch((err) => {});
    },
    //随机数生成
    async Shujs(e) {
      var count = e;
      //原始数组
      var original = new Array();
      //给原始数组original赋值
      for (var i = 0; i > count; i++) {
        original[i] = i + 1;
      }

      //排序
      original.sort(function () {
        return 0.5 - Math.random();
      });

      return original;
    },
  },
  filters: {
    wenz(val) {
      const nums = 10; // 设置限定字数,默认为5
      if (!val) return "";
      if (val.length > nums) {
        return val.slice(0, nums) + "...";
      }
      return val;
    },
  },
};
</script>

<style lang="less" scoped>
.guanbi {
  position: absolute;
  z-index: 55;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
  }
}
.textcolor {
  color: rgb(235, 68, 68);
}
//收索模块
.tianiss {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top: 10px;
  width: 350px;
  height: 500px;

  // border: 1px solid #000;
  position: absolute;
  z-index: 99;
  background-color: rgb(252, 252, 252);
  border-radius: 5px;
  //4个边距阴影

  box-shadow: rgba(163, 163, 163, 0.438) 0px 0px 10px 5px;
  //开启滚动

  ul {
    width: 350px;

    overflow: hidden;
    overflow-x: hidden;
    overflow-y: scroll;

    width: 350px;
    height: 500px;
    // border: 1px solid #000;
    .texsa {
      font-size: 15px;
      width: 20px;
      // color: rgb(194, 194, 194);
    }
    .textis {
      color: rgb(146, 146, 146);
    }
    li {
      overflow: hidden;
      .jiage {
        // height: 55px;
        margin-right: 15px;
        margin-left: 15px;
        display: flex;
        align-items: center;
        overflow: hidden;

        .tltlesa {
          flex: 1;
          height: 50px;
          overflow: hidden;
          margin-left: 20px;
          // margin-bottom: 5px;
          display: flex;
          // align-items: center;
          justify-content: center;
          flex-direction: column;
          .biaotIEX {
            display: flex;
            .img {
              width: 25px;
              height: 15px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            span {
              font-size: 15px;
              margin-right: 10px;
              &:nth-child(2) {
                color: rgb(172, 172, 172);
                font-size: 14px;
              }
              &:nth-child(1) {
                color: rgb(41, 40, 40);
                font-size: 14px;
              }
            }
          }
        }
        .conten {
          margin-top: 5px;
          white-space: nowrap;
          /*溢出部分文字隐藏*/
          overflow: hidden;
          /*溢出部分省略号处理*/
          text-overflow: ellipsis;
          font-size: 15px;
          color: rgba(94, 94, 94, 0.719) !important;
        }
      }
      &:nth-child(1) {
        // height: 100px;
        // border: 1px solid #000;
        .history {
          padding-bottom: 20px;
          padding-top: 20px;
          margin-right: 15px;
          margin-left: 15px;

          .tiltesS {
            display: flex;
            align-items: center;

            span {
              font-size: 15px;
              margin-right: 10px;
            }
            .img {
              width: 17px;
              height: 17px;
              display: flex;
              align-items: center;
              justify-content: center;
              // border: 1px solid #000;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .shosuoJilu {
            // margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            .titles {
              margin-top: 10px;
              margin-right: 5px;
              // display: block;
              padding-right: 15px;
              padding-left: 15px;
              font-size: 15px;
              padding-top: 5px;
              padding-bottom: 5px;
              border-radius: 20px;
              border: 1px solid rgb(187, 187, 187);
              position: relative;
              &:hover {
                background-color: rgba(238, 238, 238, 0.637);
              }
              .shanc {
                position: absolute;
                width: 10px;
                height: 10px;
                // border: 1px solid #000;
                //定位居中
                right: 5%;
                top: 30%;
                transform: translate(-50%, -50%);
                display: flex;
                align-items: center;
                font-size: 20px;
                justify-content: center;
                //旋转角度
                transform: rotate(45deg);
                color: rgb(170, 169, 169);
              }
            }
          }
        }
      }
      &:nth-child(n + 2) {
        height: 50px;
        display: flex;
        align-items: center;
      }
      &:nth-child(n + 3) {
        &:hover {
          background-color: rgba(228, 228, 228, 0.623);
        }
      }
      /*【限制范围】选择第6个到第9个，取两者的交集【感谢小伙伴的纠正~】 */
      &:nth-child(-n + 5):nth-child(n + 3) {
        color: rgb(241, 76, 76);
      }
      &:nth-child(n + 6) {
        color: rgb(221, 213, 213);
      }
    }
  }
}
.zhuantai {
  border-bottom: 1px solid rgb(201, 199, 197);
  display: flex;
  justify-content: space-between;
  height: 100%;
  align-content: center;

  .iszhuangts {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-content: center;
    justify-content: center;
    align-items: center;
    span {
      text-align: center;
      margin-bottom: 10px;
    }
  }
}
.jiaz {
  height: 150px;
  width: 300px;
}
.tiani {
  position: absolute;
  z-index: 99;
  // border: 2px solid rgba(139, 139, 139, 0.575);
  // left: -10px;
  width: 300px;
  // height: 500px;
  background-color: rgba(255, 255, 255, 0.973);
  border-radius: 5px;
  // border-right: 2px solid rgba(179, 175, 175, 0.705);
  //   border-bottom: 2px solid rgba(179, 175, 175, 0.705);
  //      border-left: 2px solid rgba(179, 175, 175, 0.705);
  box-shadow: 4px 4px 15px rgba(87, 85, 85, 0.623);
  li {
    // margin-left: 10px;

    // span {
    //   margin-left: 15px;
    //   color: rgb(57, 57, 58);
    // }
    &:nth-child(1) {
      height: 100px;
      // border: 1px solid #000;
    }
    // &:nth-child(2){

    // }
    &:nth-child(n + 2) {
      margin-top: 5px;
      font-size: 17px;
      height: 50px;
      line-height: 50px;
      &:hover {
        background-color: rgba(209, 209, 209, 0.637);
      }
    }
  }
}
.navtob {
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f35353;
  .daleft {
    display: flex;
    height: 100%;
    .left {
      height: 100%;
      margin-right: 20px;
      .logo {
        width: 180px;
        height: 100%;
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        .img {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          background-color: rgb(255, 255, 255);
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
          }
          margin-right: 5px;
        }
        span {
          font-size: 18px;
          font-weight: 550;
          color: rgb(248, 248, 248);
        }
      }
      .logoer {
        width: 180px;
        height: 100%;
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        .img {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          // background-color: rgb(255, 255, 255);
          border-radius: 50%;
          img {
            transform: rotate(-90deg);
            width: 100%;
            height: 100%;
          }
          margin-right: 5px;
        }
      }
    }
    .gong {
      width: 250px;
      height: 100%;
      li {
        margin-right: 10px;
      }
      //   border: 1px solid #000;
      display: flex;
      align-items: center;
      .sjianA {
        //   margin-right: 20px;
        .img {
          width: 20px;
          height: 20px;
          //   border: 1px solid #000;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background-color: #ec4141;
          img {
            width: 60%;
            height: 60%;
            margin-right: 3px;
          }
        }
      }
      .sjianb {
        transform: rotate(180deg);
        .img {
          width: 20px;
          height: 20px;
          //   border: 1px solid #000;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background-color: #ec4141;
          img {
            width: 60%;
            height: 60%;
            margin-right: 3px;
          }
        }
      }
      .ssk {
        width: 200px;
        display: flex;
        align-items: center;
        height: 30px;
        // flex-direction: row-reverse;
        //   border: 1px solid #000;
        border-radius: 50px;
        overflow: hidden;
        background-color: #ec4141;
        .shousimg {
          width: 30px;
          height: 30px;
          // border: 1px solid #000;
          display: flex;
          align-items: center;
          justify-content: center;
          .img {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
            }
            // border: 1px solid #000;
          }
        }
        /deep/.el-input-group {
          display: flex;
          flex-direction: row-reverse;
        }
        /deep/ .el-input__inner {
          height: 47px;
          background-color: #ec4141;
          border: none;
          padding: 0;
          color: rgba(241, 241, 241, 0.795);
        }
      }
      .maikf {
        height: 30px;
        width: 30px;
        background-color: #ec4141;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 70%;
          height: 70%;
        }
      }
    }
  }
  .daright {
    width: 300px;
    // border: 1px solid #000;
    position: relative;
    // li {
    //   margin-right: 10px;
    // }

    .right {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      height: 100%;
      li {
        margin-right: 10px;
      }
      .yhun {
        // width: 100px;
        display: flex;
        align-items: center;
        margin-right: 20px;
        .denglo {
          height: 35px;
          width: 35px;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          align-items: center;
          margin-right: 5px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .txiang {
          height: 25px;
          width: 25px;
          border-radius: 50%;
          display: flex;
          align-items: center;

          // border: 1px solid #000;
          img {
            width: 100%;
            height: 100%;
          }
          margin-right: 5px;
        }
        span {
          margin-top: 3px;
          color: rgb(241, 240, 240);
          font-weight: 550;
        }
      }
      .zhuti {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>


